<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/embedded-content.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=edits.html>← 4.7 Edits</a> — <a href=index.html>Table of Contents</a> — <a href=images.html>4.8.4 Images →</a></nav><ol class=toc><li><ol><li><a href=embedded-content.html#embedded-content><span class=secno>4.8</span> Embedded content</a><ol><li><a href=embedded-content.html#the-picture-element><span class=secno>4.8.1</span> The <code>picture</code> element</a><li><a href=embedded-content.html#the-source-element><span class=secno>4.8.2</span> The <code>source</code> element</a><li><a href=embedded-content.html#the-img-element><span class=secno>4.8.3</span> The <code>img</code> element</a></ol></ol></ol><h3 id=embedded-content><span class=secno>4.8</span> Embedded content<a href=#embedded-content class=self-link></a></h3>

  <h4 id=the-picture-element><span class=secno>4.8.1</span> The <dfn data-dfn-type=element><code>picture</code></dfn> element<a href=#the-picture-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture title="The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.">Element/picture</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>38+</span></span><span class="safari yes"><span>Safari</span><span>9.1+</span></span><span class="chrome yes"><span>Chrome</span><span>38+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-picture-element:concept-element-categories>Categories</a>:<dd><a id=the-picture-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-picture-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-picture-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd><a id=the-picture-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-picture-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-picture-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-picture-element:concept-element-content-model>Content model</a>:<dd>Zero or more <code id=the-picture-element:the-source-element><a href=#the-source-element>source</a></code> elements, followed by one <code id=the-picture-element:the-img-element><a href=#the-img-element>img</a></code> element,
   optionally intermixed with <a id=the-picture-element:script-supporting-elements-2 href=dom.html#script-supporting-elements-2>script-supporting elements</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-picture-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-picture-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-picture-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-picture-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-picture>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-picture>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-picture-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLPictureElement</code>.</dl>

  <p>The <code id=the-picture-element:the-picture-element><a href=#the-picture-element>picture</a></code> element is a container
  which provides multiple sources to its contained <code id=the-picture-element:the-img-element-2><a href=#the-img-element>img</a></code> element
  to allow authors to declaratively control or give hints to the user agent about which image resource to use,
  based on the screen pixel density, <a id=the-picture-element:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> size, image format, and other factors.
  It <a id=the-picture-element:represents href=dom.html#represents>represents</a> its children.</p>

  <p class=note>The <code id=the-picture-element:the-picture-element-2><a href=#the-picture-element>picture</a></code> element is somewhat different from the similar-looking
  <code id=the-picture-element:the-video-element><a href=media.html#the-video-element>video</a></code> and <code id=the-picture-element:the-audio-element><a href=media.html#the-audio-element>audio</a></code> elements. While all of them contain <code id=the-picture-element:the-source-element-2><a href=#the-source-element>source</a></code>
  elements, the <code id=the-picture-element:the-source-element-3><a href=#the-source-element>source</a></code> element's <code id=the-picture-element:attr-source-src><a href=#attr-source-src>src</a></code> attribute
  has no meaning when the element is nested within a <code id=the-picture-element:the-picture-element-3><a href=#the-picture-element>picture</a></code> element, and the resource
  selection algorithm is different. Also, the <code id=the-picture-element:the-picture-element-4><a href=#the-picture-element>picture</a></code> element itself does not display
  anything; it merely provides a context for its contained <code id=the-picture-element:the-img-element-3><a href=#the-img-element>img</a></code> element that enables it
  to choose from multiple <a href=https://url.spec.whatwg.org/#concept-url id=the-picture-element:url data-x-internal=url>URLs</a>.</p>


  <h4 id=the-source-element><span class=secno>4.8.2</span> The <dfn data-dfn-type=element><code>source</code></dfn> element<a href=#the-source-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source title="The <source> HTML element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.">Element/source</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-source-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-source-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <code id=the-source-element:the-picture-element><a href=#the-picture-element>picture</a></code> element, before the <code id=the-source-element:the-img-element><a href=#the-img-element>img</a></code> element.<dd>As a child of a <a id=the-source-element:media-element href=media.html#media-element>media element</a>, before any <a id=the-source-element:flow-content-2 href=dom.html#flow-content-2>flow content</a> or
   <code id=the-source-element:the-track-element><a href=media.html#the-track-element>track</a></code> elements.<dt><a href=dom.html#concept-element-content-model id=the-source-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-source-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-source-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-source-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-source-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-source-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-source-element:attr-source-type><a href=#attr-source-type>type</a></code> —  Type of embedded resource
     <dd><code id=the-source-element:attr-source-media><a href=#attr-source-media>media</a></code> —  Applicable media
     <dd><code id=the-source-element:attr-source-src><a href=#attr-source-src>src</a></code> (in <code id=the-source-element:the-audio-element><a href=media.html#the-audio-element>audio</a></code> or <code id=the-source-element:the-video-element><a href=media.html#the-video-element>video</a></code>) —  Address of the resource
     <dd><code id=the-source-element:attr-source-srcset><a href=#attr-source-srcset>srcset</a></code> (in <code id=the-source-element:the-picture-element-2><a href=#the-picture-element>picture</a></code>) —  Images to use in different situations, e.g., high-resolution displays, small monitors, etc.
     <dd><code id=the-source-element:attr-source-sizes><a href=#attr-source-sizes>sizes</a></code> (in <code id=the-source-element:the-picture-element-3><a href=#the-picture-element>picture</a></code>) —  Image sizes for different page layouts
     <dd><code id=the-source-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> (in <code id=the-source-element:the-picture-element-4><a href=#the-picture-element>picture</a></code>) —  Horizontal dimension
     <dd><code id=the-source-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> (in <code id=the-source-element:the-picture-element-5><a href=#the-picture-element>picture</a></code>) —  Vertical dimension
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-source-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-source>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-source>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-source-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLSourceElement</code>.</dl>

  <p>The <code id=the-source-element:the-source-element><a href=#the-source-element>source</a></code> element allows authors to specify multiple alternative
  <span>source sets</span> for <code id=the-source-element:the-img-element-2><a href=#the-img-element>img</a></code> elements or multiple alternative
  <a href=media.html#media-resource id=the-source-element:media-resource>media resources</a> for <a href=media.html#media-element id=the-source-element:media-element-2>media
  elements</a>. It does not <a href=dom.html#represents id=the-source-element:represents>represent</a> anything on its own.</p>

  <p>The <dfn data-dfn-for=source id=attr-source-type data-dfn-type=element-attr><code>type</code></dfn> attribute
  may be present. If present, the value must be a <a id=the-source-element:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a>.</p>

  <p>The <dfn data-dfn-for=source id=attr-source-media data-dfn-type=element-attr><code>media</code></dfn>
  attribute may also be present. If present, the value must contain a <a id=the-source-element:valid-media-query-list href=common-microsyntaxes.html#valid-media-query-list>valid media query
  list</a>. The user agent will skip to the next <code id=the-source-element:the-source-element-2><a href=#the-source-element>source</a></code> element if the value does
  not <a href=common-microsyntaxes.html#matches-the-environment id=the-source-element:matches-the-environment>match the environment</a>.</p>

  <p class=note>The <code id=the-source-element:attr-source-media-2><a href=#attr-source-media>media</a></code> attribute is only evaluated
  once during the <span>resource selection algorithm</span>
  for <a href=media.html#media-element id=the-source-element:media-element-3>media elements</a>. In contrast, when using the
  <code id=the-source-element:the-picture-element-6><a href=#the-picture-element>picture</a></code> element, the user agent will <a href=#img-environment-changes>react to
  changes in the environment</a>.</p>

  <p>The remainder of the requirements depend on whether the parent is a <code id=the-source-element:the-picture-element-7><a href=#the-picture-element>picture</a></code>
  element or a <a id=the-source-element:media-element-4 href=media.html#media-element>media element</a>:</p>

  <dl class=switch><dt>The <code id=the-source-element:the-source-element-3><a href=#the-source-element>source</a></code> element's parent is a <code id=the-source-element:the-picture-element-8><a href=#the-picture-element>picture</a></code> element<dd>
    <p>The <dfn data-dfn-for=source id=attr-source-srcset data-dfn-type=element-attr><code>srcset</code></dfn>
    attribute must be present, and is a <a id=the-source-element:srcset-attribute href=images.html#srcset-attribute>srcset attribute</a>.</p>

    <p>The <code id=the-source-element:attr-source-srcset-2><a href=#attr-source-srcset>srcset</a></code> attribute contributes the <span>image sources</span> to the <span>source set</span>, if the
    <code id=the-source-element:the-source-element-4><a href=#the-source-element>source</a></code> element is selected.</p>

    <p>If the <code id=the-source-element:attr-source-srcset-3><a href=#attr-source-srcset>srcset</a></code> attribute has any <a href=images.html#image-candidate-string id=the-source-element:image-candidate-string>image candidate strings</a> using a <a id=the-source-element:width-descriptor href=images.html#width-descriptor>width descriptor</a>, the
    <code id=the-source-element:attr-source-sizes-2><a href=#attr-source-sizes>sizes</a></code> attribute may also be present. If, additionally,
    the following sibling <code id=the-source-element:the-img-element-3><a href=#the-img-element>img</a></code> element does not <a href=#allows-auto-sizes id=the-source-element:allows-auto-sizes>allow
    auto-sizes</a>, the <code id=the-source-element:attr-source-sizes-3><a href=#attr-source-sizes>sizes</a></code> attribute must be present.
    The <dfn data-dfn-for=source id=attr-source-sizes data-dfn-type=element-attr><code>sizes</code></dfn>
    attribute is a <a id=the-source-element:sizes-attribute href=images.html#sizes-attribute>sizes attribute</a>, which contributes the <span>source size</span> to
    the <span>source set</span>, if the <code id=the-source-element:the-source-element-5><a href=#the-source-element>source</a></code> element is selected.</p>

    <p class=note>If the <code id=the-source-element:the-img-element-4><a href=#the-img-element>img</a></code> element <a href=#allows-auto-sizes id=the-source-element:allows-auto-sizes-2>allows auto-sizes</a>, then the <code id=the-source-element:attr-source-sizes-4><a href=#attr-source-sizes>sizes</a></code> attribute can be omitted on previous sibling
    <code id=the-source-element:the-source-element-6><a href=#the-source-element>source</a></code> elements. In such cases, it is equivalent to specifying <code id=the-source-element:valdef-sizes-auto><a href=images.html#valdef-sizes-auto>auto</a></code>.</p>

    <p>The <code id=the-source-element:the-source-element-7><a href=#the-source-element>source</a></code> element supports <a id=the-source-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a>. The
    <code id=the-source-element:the-img-element-5><a href=#the-img-element>img</a></code> element can use the <code id=the-source-element:attr-dim-width-2><a href=embedded-content-other.html#attr-dim-width>width</a></code> and <code id=the-source-element:attr-dim-height-2><a href=embedded-content-other.html#attr-dim-height>height</a></code> attributes of a <code id=the-source-element:the-source-element-8><a href=#the-source-element>source</a></code> element, instead of
    those on the <code id=the-source-element:the-img-element-6><a href=#the-img-element>img</a></code> element itself, to determine its rendered dimensions and
    aspect-ratio, <a href=#dimRendering>as defined in the Rendering section</a>.</p>

    <p>The <code id=the-source-element:attr-source-type-2><a href=#attr-source-type>type</a></code> attribute gives the type of the images in the
    <span>source set</span>, to allow the user agent to skip to the next <code id=the-source-element:the-source-element-9><a href=#the-source-element>source</a></code> element
    if it does not support the given type.</p>

    <p class=note>If the <code id=the-source-element:attr-source-type-3><a href=#attr-source-type>type</a></code> attribute is <em>not</em>
    specified, the user agent will not select a different <code id=the-source-element:the-source-element-10><a href=#the-source-element>source</a></code> element if it finds
    that it does not support the image format after fetching it.</p>

    <p>When a <code id=the-source-element:the-source-element-11><a href=#the-source-element>source</a></code> element has a following sibling <code id=the-source-element:the-source-element-12><a href=#the-source-element>source</a></code> element or
    <code id=the-source-element:the-img-element-7><a href=#the-img-element>img</a></code> element with a <code id=the-source-element:attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute
    specified, it must have at least one of the following:</p>

    <ul><li><p>A <code id=the-source-element:attr-source-media-3><a href=#attr-source-media>media</a></code> attribute specified with a value that,
     after <a href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace id=the-source-element:strip-leading-and-trailing-ascii-whitespace data-x-internal=strip-leading-and-trailing-ascii-whitespace>stripping leading and trailing
     ASCII whitespace</a>, is not the empty string and is not an <a id=the-source-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
     case-insensitive</a> match for the string "<code>all</code>".<li><p>A <code id=the-source-element:attr-source-type-4><a href=#attr-source-type>type</a></code> attribute specified.</ul>

    <p>The <code id=the-source-element:attr-source-src-2><a href=#attr-source-src>src</a></code> attribute must not be present.</p>
   <dt>The <code id=the-source-element:the-source-element-13><a href=#the-source-element>source</a></code> element's parent is a <a id=the-source-element:media-element-5 href=media.html#media-element>media element</a><dd>
    <p>The <dfn data-dfn-for=source id=attr-source-src data-dfn-type=element-attr><code>src</code></dfn> attribute
    gives the <a id=the-source-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the <a id=the-source-element:media-resource-2 href=media.html#media-resource>media resource</a>. The value must be a <a id=the-source-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid
    non-empty URL potentially surrounded by spaces</a>. This attribute must be present.</p>

    <p>The <code id=the-source-element:attr-source-type-5><a href=#attr-source-type>type</a></code> attribute gives the type of the <a id=the-source-element:media-resource-3 href=media.html#media-resource>media
    resource</a>, to help the user agent determine if it can play this <a id=the-source-element:media-resource-4 href=media.html#media-resource>media
    resource</a> before fetching it. The <code>codecs</code> parameter, which certain
    MIME types define, might be necessary to specify exactly how the resource is encoded.
    <a href=references.html#refsRFC6381>[RFC6381]</a></p>

    <p class=note>Dynamically modifying a <code id=the-source-element:the-source-element-14><a href=#the-source-element>source</a></code> element's <code id=the-source-element:attr-source-src-3><a href=#attr-source-src>src</a></code> or <code id=the-source-element:attr-source-type-6><a href=#attr-source-type>type</a></code> attribute
    when the element is already inserted in a <code id=the-source-element:the-video-element-2><a href=media.html#the-video-element>video</a></code> or <code id=the-source-element:the-audio-element-2><a href=media.html#the-audio-element>audio</a></code> element will
    have no effect. To change what is playing, just use the <code id=the-source-element:attr-media-src><a href=media.html#attr-media-src>src</a></code>
    attribute on the <a id=the-source-element:media-element-6 href=media.html#media-element>media element</a> directly, possibly making use of the <code id=the-source-element:dom-navigator-canplaytype><a href=media.html#dom-navigator-canplaytype>canPlayType()</a></code> method to pick from amongst available
    resources. Generally, manipulating <code id=the-source-element:the-source-element-15><a href=#the-source-element>source</a></code> elements manually after the document has
    been parsed is an unnecessarily complicated approach.</p>

    <div class=example>

     <p>The following list shows some examples of how to use the <code>codecs=</code> MIME
     parameter in the <code id=the-source-element:attr-source-type-7><a href=#attr-source-type>type</a></code> attribute.</p>

     <dl><dt>H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.mp4&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;&apos;</c-><c- p>&gt;</c-></code></pre><dt>H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.mp4&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/mp4; codecs=&quot;avc1.58A01E, mp4a.40.2&quot;&apos;</c-><c- p>&gt;</c-></code></pre><dt>H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.mp4&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/mp4; codecs=&quot;avc1.4D401E, mp4a.40.2&quot;&apos;</c-><c- p>&gt;</c-></code></pre><dt>H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.mp4&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/mp4; codecs=&quot;avc1.64001E, mp4a.40.2&quot;&apos;</c-><c- p>&gt;</c-></code></pre><dt>MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.mp4&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/mp4; codecs=&quot;mp4v.20.8, mp4a.40.2&quot;&apos;</c-><c- p>&gt;</c-></code></pre><dt>MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.mp4&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/mp4; codecs=&quot;mp4v.20.240, mp4a.40.2&quot;&apos;</c-><c- p>&gt;</c-></code></pre><dt>MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.3gp&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/3gpp; codecs=&quot;mp4v.20.8, samr&quot;&apos;</c-><c- p>&gt;</c-></code></pre><dt>Theora video and Vorbis audio in Ogg container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.ogv&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/ogg; codecs=&quot;theora, vorbis&quot;&apos;</c-><c- p>&gt;</c-></code></pre><dt>Theora video and Speex audio in Ogg container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.ogv&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/ogg; codecs=&quot;theora, speex&quot;&apos;</c-><c- p>&gt;</c-></code></pre><dt>Vorbis audio alone in Ogg container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;audio.ogg&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;audio/ogg; codecs=vorbis&apos;</c-><c- p>&gt;</c-></code></pre><dt>Speex audio alone in Ogg container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;audio.spx&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;audio/ogg; codecs=speex&apos;</c-><c- p>&gt;</c-></code></pre><dt>FLAC audio alone in Ogg container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;audio.oga&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;audio/ogg; codecs=flac&apos;</c-><c- p>&gt;</c-></code></pre><dt>Dirac video and Vorbis audio in Ogg container<dd><pre><code class='html'><c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.ogv&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/ogg; codecs=&quot;dirac, vorbis&quot;&apos;</c-><c- p>&gt;</c-></code></pre></dl>
    </div>

    <p>The <code id=the-source-element:attr-source-srcset-4><a href=#attr-source-srcset>srcset</a></code> and <code id=the-source-element:attr-source-sizes-5><a href=#attr-source-sizes>sizes</a></code> attributes must not be present.</p>
   </dl>

  

  <div class=example>
   <p>If the author isn't sure if user agents will all be able to render the media resources
   provided, the author can listen to the <code id=the-source-element:event-error><a href=indices.html#event-error>error</a></code> event on the last
   <code id=the-source-element:the-source-element-16><a href=#the-source-element>source</a></code> element and trigger fallback behavior:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> fallback<c- p>(</c->video<c- p>)</c-> <c- p>{</c->
   <c- c1>// replace &lt;video&gt; with its contents</c->
   <c- k>while</c-> <c- p>(</c->video<c- p>.</c->hasChildNodes<c- p>())</c-> <c- p>{</c->
     <c- k>if</c-> <c- p>(</c->video<c- p>.</c->firstChild <c- k>instanceof</c-> HTMLSourceElement<c- p>)</c->
       video<c- p>.</c->removeChild<c- p>(</c->video<c- p>.</c->firstChild<c- p>);</c->
     <c- k>else</c->
       video<c- p>.</c->parentNode<c- p>.</c->insertBefore<c- p>(</c->video<c- p>.</c->firstChild<c- p>,</c-> video<c- p>);</c->
   <c- p>}</c->
   video<c- p>.</c->parentNode<c- p>.</c->removeChild<c- p>(</c->video<c- p>);</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>video</c-> <c- e>controls</c-> <c- e>autoplay</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.mp4&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;&apos;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>source</c-> <c- e>src</c-><c- o>=</c-><c- s>&apos;video.ogv&apos;</c-> <c- e>type</c-><c- o>=</c-><c- s>&apos;video/ogg; codecs=&quot;theora, vorbis&quot;&apos;</c->
         <c- e>onerror</c-><c- o>=</c-><c- s>&quot;fallback(parentNode)&quot;</c-><c- p>&gt;</c->
 ...
<c- p>&lt;/</c-><c- f>video</c-><c- p>&gt;</c-></code></pre>
  </div>



  <h4 id=the-img-element><span class=secno>4.8.3</span> The <dfn data-dfn-type=element><code>img</code></dfn> element<a href=#the-img-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img title="The <img> HTML element embeds an image into the document.">Element/img</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-img-element:concept-element-categories>Categories</a>:<dd><a id=the-img-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-img-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-img-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd><a id=the-img-element:form-associated-element href=forms.html#form-associated-element>Form-associated element</a>.<dd>If the element has a <code id=the-img-element:attr-hyperlink-usemap><a href=image-maps.html#attr-hyperlink-usemap>usemap</a></code> attribute: <a id=the-img-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-img-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-img-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-img-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dd>As a child of a <code id=the-img-element:the-picture-element><a href=#the-picture-element>picture</a></code> element, after all <code id=the-img-element:the-source-element><a href=#the-source-element>source</a></code> elements.<dt><a href=dom.html#concept-element-content-model id=the-img-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-img-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-img-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-img-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-img-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-img-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-img-element:attr-img-alt><a href=#attr-img-alt>alt</a></code> —  Replacement text for use when images are not available
     <dd><code id=the-img-element:attr-img-src><a href=#attr-img-src>src</a></code> —  Address of the resource
     <dd><code id=the-img-element:attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> —  Images to use in different situations, e.g., high-resolution displays, small monitors, etc.
     <dd><code id=the-img-element:attr-img-sizes><a href=#attr-img-sizes>sizes</a></code> —  Image sizes for different page layouts
     <dd><code id=the-img-element:attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> —  How the element handles crossorigin requests
     <dd><code id=the-img-element:attr-hyperlink-usemap-2><a href=image-maps.html#attr-hyperlink-usemap>usemap</a></code> —  Name of <a id=the-img-element:image-map href=image-maps.html#image-map>image map</a> to use
     <dd><code id=the-img-element:attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> —  Whether the image is a server-side image map
     <dd><code id=the-img-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-img-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dd><code id=the-img-element:attr-img-referrerpolicy><a href=#attr-img-referrerpolicy>referrerpolicy</a></code> —  <a id=the-img-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-img-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dd><code id=the-img-element:attr-img-decoding><a href=#attr-img-decoding>decoding</a></code> —  Decoding hint to use when processing this image for presentation
     <dd><code id=the-img-element:attr-img-loading><a href=#attr-img-loading>loading</a></code> —  Used when determining loading deferral
     <dd><code id=the-img-element:attr-img-fetchpriority><a href=#attr-img-fetchpriority>fetchpriority</a></code> —  Sets the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-img-element:concept-request-priority data-x-internal=concept-request-priority>priority</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-img-element:concept-fetch-2 data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-img-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd>If the element has a non-empty <code id=the-img-element:attr-img-alt-2><a href=#attr-img-alt>alt</a></code> attribute: <a href=https://w3c.github.io/html-aria/#el-img>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-img>for implementers</a>.<dd>Otherwise: <a href=https://w3c.github.io/html-aria/#el-img-empty-alt>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-img-empty-alt>for implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-img-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLImageElement</code>.</dl>

  <p>An <code id=the-img-element:the-img-element><a href=#the-img-element>img</a></code> element represents an image.</p>

  <p>An <code id=the-img-element:the-img-element-2><a href=#the-img-element>img</a></code> element has a <dfn id=concept-img-dimension-attribute-source>dimension
  attribute source</dfn>, initially set to the element itself.</p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src title="The HTMLImageElement property src, which reflects the HTML src attribute, specifies the image to display in the <img> element.">HTMLImageElement/src</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset title="The <img> HTML element embeds an image into the document.">Element/img#attr-srcset</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>38+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>34+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>≤18+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The image given by the <dfn data-dfn-for=img id=attr-img-src data-dfn-type=element-attr><code>src</code></dfn>
  and <dfn data-dfn-for=img id=attr-img-srcset data-dfn-type=element-attr><code>srcset</code></dfn> attributes, and
  any previous sibling <code id=the-img-element:the-source-element-2><a href=#the-source-element>source</a></code> elements' <code id=the-img-element:attr-source-srcset><a href=#attr-source-srcset>srcset</a></code>
  attributes if the parent is a <code id=the-img-element:the-picture-element-2><a href=#the-picture-element>picture</a></code> element, is the embedded content; the value of
  the <dfn data-dfn-for=img id=attr-img-alt data-dfn-type=element-attr><code>alt</code></dfn> attribute provides
  equivalent content for those who cannot process images or who have image loading disabled (i.e.,
  it is the <code id=the-img-element:the-img-element-3><a href=#the-img-element>img</a></code> element's <a id=the-img-element:fallback-content href=dom.html#fallback-content>fallback content</a>).</p>

  <p>The requirements on the <code id=the-img-element:attr-img-alt-3><a href=#attr-img-alt>alt</a></code> attribute's value are described
  <a href=images.html#alt>in a separate section</a>.</p>

  <p>At least one of the <code id=the-img-element:attr-img-src-2><a href=#attr-img-src>src</a></code> and <code id=the-img-element:attr-img-srcset-2><a href=#attr-img-srcset>srcset</a></code> attributes must be present.</p>

  <p>If the <code id=the-img-element:attr-img-src-3><a href=#attr-img-src>src</a></code> attribute is present, it must contain a
  <a id=the-img-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a> referencing a non-interactive,
  optionally animated, image resource that is neither paged nor scripted.</p>

  <p class=note>The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs,
  JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG document element),
  animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG
  <a id=the-img-element:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a> that use declarative SMIL animation), and so forth. However, these
  definitions preclude SVG files with script, multipage PDF files, interactive MNG files, HTML
  documents, plain text documents, and the like. <a href=references.html#refsPNG>[PNG]</a> <a href=references.html#refsGIF>[GIF]</a> <a href=references.html#refsJPEG>[JPEG]</a>
  <a href=references.html#refsPDF>[PDF]</a> <a href=references.html#refsXML>[XML]</a> <a href=references.html#refsAPNG>[APNG]</a> <a href=references.html#refsSVG>[SVG]</a> <a href=references.html#refsMNG>[MNG]</a></p>

  <p>The <code id=the-img-element:attr-img-srcset-3><a href=#attr-img-srcset>srcset</a></code> attribute is a <a id=the-img-element:srcset-attribute href=images.html#srcset-attribute>srcset
  attribute</a>.</p>

  <p>The <code id=the-img-element:attr-img-srcset-4><a href=#attr-img-srcset>srcset</a></code> attribute and the <code id=the-img-element:attr-img-src-4><a href=#attr-img-src>src</a></code> attribute (if <a href=images.html#width-descriptor id=the-img-element:width-descriptor>width
  descriptors</a> are not used) contribute the <span>image sources</span>
  to the <span>source set</span> (if no <code id=the-img-element:the-source-element-3><a href=#the-source-element>source</a></code> element was selected).</p>

  <p>If the <code id=the-img-element:attr-img-srcset-5><a href=#attr-img-srcset>srcset</a></code> attribute is present and has any <a href=images.html#image-candidate-string id=the-img-element:image-candidate-string>image candidate strings</a> using a <a id=the-img-element:width-descriptor-2 href=images.html#width-descriptor>width
  descriptor</a>, the <code id=the-img-element:attr-img-sizes-2><a href=#attr-img-sizes>sizes</a></code> attribute must also be present.
  If the <code id=the-img-element:attr-img-srcset-6><a href=#attr-img-srcset>srcset</a></code> attribute is <em>not</em> specified, and the
  <code id=the-img-element:attr-img-loading-2><a href=#attr-img-loading>loading</a></code> attribute is in the <a href=urls-and-fetching.html#attr-loading-lazy-state id=the-img-element:attr-loading-lazy-state>Lazy</a> state, the <code id=the-img-element:attr-img-sizes-3><a href=#attr-img-sizes>sizes</a></code> attribute may be specified with the value "<code>auto</code>" (<a id=the-img-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>). The <dfn data-dfn-for=img id=attr-img-sizes data-dfn-type=element-attr><code>sizes</code></dfn> attribute is a <a id=the-img-element:sizes-attribute href=images.html#sizes-attribute>sizes attribute</a>,
  which contributes the <span>source size</span> to the <span>source set</span> (if no
  <code id=the-img-element:the-source-element-4><a href=#the-source-element>source</a></code> element was selected).</p>

  <p>An <code id=the-img-element:the-img-element-4><a href=#the-img-element>img</a></code> element <dfn id=allows-auto-sizes>allows auto-sizes</dfn> if:</p>

  <ul><li>its <code id=the-img-element:attr-img-loading-3><a href=#attr-img-loading>loading</a></code> attribute is in the <a href=urls-and-fetching.html#attr-loading-lazy-state id=the-img-element:attr-loading-lazy-state-2>Lazy</a> state, and<li>its <code id=the-img-element:attr-img-sizes-4><a href=#attr-img-sizes>sizes</a></code> attribute's value is "<code>auto</code>" (<a id=the-img-element:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>), or starts with "<code>auto,</code>" (<a id=the-img-element:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>).</ul>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin title="The crossorigin attribute, valid on the <audio>, <img>, <link>, <script>, and <video> elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.">Attributes/crossorigin</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>8+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>13+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=img id=attr-img-crossorigin data-dfn-type=element-attr><code>crossorigin</code></dfn>
  attribute is a <a id=the-img-element:cors-settings-attribute href=urls-and-fetching.html#cors-settings-attribute>CORS settings attribute</a>. Its purpose is to allow images from
  third-party sites that allow cross-origin access to be used with <code id=the-img-element:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code>.</p>

  <p>The <dfn data-dfn-for=img id=attr-img-referrerpolicy data-dfn-type=element-attr><code>referrerpolicy</code></dfn> attribute is a <a id=the-img-element:referrer-policy-attribute href=urls-and-fetching.html#referrer-policy-attribute>referrer
  policy attribute</a>. Its purpose is to set the <a id=the-img-element:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a> used when <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-img-element:concept-fetch-3 data-x-internal=concept-fetch>fetching</a> the image. <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

  <p>The <dfn data-dfn-for=img id=attr-img-decoding data-dfn-type=element-attr><code>decoding</code></dfn>
  attribute indicates the preferred method to <span>decode</span> this
  image. The attribute, if present, must be an <span>image decoding hint</span>. This attribute's <i id=the-img-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-img-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <span>Auto</span> state.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority title="The fetchPriority property of the HTMLImageElement interface represents a hint given to the browser on how it should prioritize the fetch of the image relative to other images.">HTMLImageElement/fetchPriority</a><div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari yes"><span>Safari</span><span title="Requires setting a user preference or runtime flag.">🔰 preview+</span></span><span class="chrome yes"><span>Chrome</span><span>102+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>102+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=img id=attr-img-fetchpriority data-dfn-type=element-attr><code>fetchpriority</code></dfn> attribute is a <a id=the-img-element:fetch-priority-attribute href=urls-and-fetching.html#fetch-priority-attribute>fetch
  priority attribute</a>. Its purpose is to set the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-img-element:concept-request-priority-2 data-x-internal=concept-request-priority>priority</a> used when <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-img-element:concept-fetch-4 data-x-internal=concept-fetch>fetching</a> the image.</p>

  <p>The <dfn data-dfn-for=img id=attr-img-loading data-dfn-type=element-attr><code>loading</code></dfn> attribute is a <a id=the-img-element:lazy-loading-attribute href=urls-and-fetching.html#lazy-loading-attribute>lazy
  loading attribute</a>. Its purpose is to indicate the policy for loading images that are
  outside the viewport.</p>

  <p>When the <code id=the-img-element:attr-img-loading-4><a href=#attr-img-loading>loading</a></code> attribute's state is changed to the
  <a href=urls-and-fetching.html#attr-loading-eager-state id=the-img-element:attr-loading-eager-state>Eager</a> state, the user agent must run these
  steps:</p>

  <ol><li><p>Let <var>resumptionSteps</var> be the <code id=the-img-element:the-img-element-5><a href=#the-img-element>img</a></code> element's <a id=the-img-element:lazy-load-resumption-steps href=urls-and-fetching.html#lazy-load-resumption-steps>lazy load
   resumption steps</a>.<li><p>If <var>resumptionSteps</var> is null, then return.<li><p>Set the <code id=the-img-element:the-img-element-6><a href=#the-img-element>img</a></code>'s <a id=the-img-element:lazy-load-resumption-steps-2 href=urls-and-fetching.html#lazy-load-resumption-steps>lazy load resumption steps</a> to null.<li><p>Invoke <var>resumptionSteps</var>.</ol>

  <div class=example>
<pre><code class='html'><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;1.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;1&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;2.jpeg&quot;</c-> <c- e>loading</c-><c- o>=</c-><c- s>eager</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;2&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;3.jpeg&quot;</c-> <c- e>loading</c-><c- o>=</c-><c- s>lazy</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;3&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>very-large</c-><c- p>&gt;&lt;/</c-><c- f>div</c-><c- p>&gt;</c-> <c- c>&lt;!-- Everything after this div is below the viewport --&gt;</c->
<c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;4.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;4&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;5.jpeg&quot;</c-> <c- e>loading</c-><c- o>=</c-><c- s>lazy</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;5&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>In the example above, the images load as follows:</p>

   <dl class=switch><dt><code>1.jpeg</code>, <code>2.jpeg</code>,
    <code>4.jpeg</code><dd><p>The images load eagerly and delay the window's load event.<dt><code>3.jpeg</code><dd><p>The image loads when layout is known, due to being in the viewport, however it does not
    delay the window's load event.<dt><code>5.jpeg</code><dd><p>The image loads only once scrolled into the viewport, and does not delay the window's
    load event.</dl>

   <p class=note>Developers are encouraged to specify a preferred aspect ratio via <code id=the-img-element:attr-dim-width-2><a href=embedded-content-other.html#attr-dim-width>width</a></code> and <code id=the-img-element:attr-dim-height-2><a href=embedded-content-other.html#attr-dim-height>height</a></code> attributes
   on lazy loaded images, even if CSS sets the image's width and height properties, to prevent the
   page layout from shifting around after the image loads.</p>
  </div>

  <p>The <code id=the-img-element:the-img-element-7><a href=#the-img-element>img</a></code> <a id=the-img-element:html-element-insertion-steps href=infrastructure.html#html-element-insertion-steps>HTML element insertion steps</a>, given <var>insertedNode</var>,
  are:</p>

  <ol><li><p>If <var>insertedNode</var>'s parent is a <code id=the-img-element:the-picture-element-3><a href=#the-picture-element>picture</a></code> element, then, count this as
   a <span>relevant mutation</span> for
   <var>insertedNode</var>.</ol>

  <p>The <code id=the-img-element:the-img-element-8><a href=#the-img-element>img</a></code> <a id=the-img-element:html-element-moving-steps href=infrastructure.html#html-element-moving-steps>HTML element moving steps</a>, given <var>movedNode</var> and
  <var>oldParent</var>, are:</p>

  <ol><li><p>If <var>oldParent</var> is a <code id=the-img-element:the-picture-element-4><a href=#the-picture-element>picture</a></code> element, then, count this as a <span>relevant mutation</span> for <var>movedNode</var>.</ol>

  <p>The <code id=the-img-element:the-img-element-9><a href=#the-img-element>img</a></code> <a id=the-img-element:html-element-removing-steps href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a>, given <var>removedNode</var> and
  <var>oldParent</var>, are:</p>

  <ol><li><p>If <var>oldParent</var> is a <code id=the-img-element:the-picture-element-5><a href=#the-picture-element>picture</a></code> element, then, count this as a
   <span>relevant mutation</span> for <var>removedNode</var>.</ol>

  <hr>

  <p>The <code id=the-img-element:the-img-element-10><a href=#the-img-element>img</a></code> element must not be used as a layout tool. In particular, <code id=the-img-element:the-img-element-11><a href=#the-img-element>img</a></code>
  elements should not be used to display transparent images, as such images rarely convey meaning and
  rarely add anything useful to the document.</p>

  

  <hr>

  <p>The <code id=the-img-element:attr-hyperlink-usemap-3><a href=image-maps.html#attr-hyperlink-usemap>usemap</a></code> attribute,
  if present, can indicate that the image has an associated
  <a id=the-img-element:image-map-2 href=image-maps.html#image-map>image map</a>.</p>

  <p>The <dfn data-dfn-for=img id=attr-img-ismap data-dfn-type=element-attr><code>ismap</code></dfn> attribute,
  when used on an element that is a descendant of an <code id=the-img-element:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element with an <code id=the-img-element:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attribute, indicates by its presence that the element
  provides access to a server-side image map. This affects how events are handled on the
  corresponding <code id=the-img-element:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> element.</p>

  <p>The <code id=the-img-element:attr-img-ismap-2><a href=#attr-img-ismap>ismap</a></code> attribute is a
  <a id=the-img-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. The attribute must not be specified
  on an element that does not have an ancestor <code id=the-img-element:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code> element
  with an <code id=the-img-element:attr-hyperlink-href-2><a href=links.html#attr-hyperlink-href>href</a></code> attribute.</p>

  <p class=note>The <code id=the-img-element:attr-hyperlink-usemap-4><a href=image-maps.html#attr-hyperlink-usemap>usemap</a></code> and <code id=the-img-element:attr-img-ismap-3><a href=#attr-img-ismap>ismap</a></code> attributes can result in confusing behavior when used
  together with <code id=the-img-element:the-source-element-5><a href=#the-source-element>source</a></code> elements with the <code id=the-img-element:attr-source-media><a href=#attr-source-media>media</a></code>
  attribute specified in a <code id=the-img-element:the-picture-element-6><a href=#the-picture-element>picture</a></code> element.</p>

  <p>The <code id=the-img-element:the-img-element-12><a href=#the-img-element>img</a></code> element supports <a id=the-img-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension
  attributes</a>.</p>

  

  <dl class=domintro><dt><code><var>image</var>.<span id=dom-img-width>width</span> [ = <var>value</var> ]</code><dt><code><var>image</var>.<span id=dom-img-height>height</span> [ = <var>value</var> ]</code><dd>
    <p>These attributes return the actual rendered dimensions of the image, or 0 if the dimensions
    are not known.</p>

    <p>They can be set, to change the corresponding content attributes.</p>
   <dt><code><var>image</var>.<span id=dom-img-naturalwidth>naturalWidth</span></code><dt><code><var>image</var>.<span id=dom-img-naturalheight>naturalHeight</span></code><dd>
    <p>These attributes return the natural dimensions of the image, or 0 if the dimensions are not
    known.</p>
   <dt><code><var>image</var>.<span id=dom-img-complete>complete</span></code><dd>
    <p>Returns true if the image has been completely downloaded or if no image is specified;
    otherwise, returns false.</p>
   <dt><code><var>image</var>.<span id=dom-img-currentsrc>currentSrc</span></code><dd><p>Returns the image's <a id=the-img-element:absolute-url href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a>.<dt><code><var>image</var>.<span id=dom-img-decode>decode</span>()</code><dd>
    <p>This method causes the user agent to <span>decode</span> the
    image <span>in parallel</span>, returning a promise that fulfills when decoding is complete.</p>

    <p>The promise will be rejected with an <a id=the-img-element:encodingerror href=https://webidl.spec.whatwg.org/#encodingerror data-x-internal=encodingerror>"<code>EncodingError</code>"</a>
    <code id=the-img-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the image cannot be decoded.</p>
   <dt><code><var>image</var> = new <span id=dom-image>Image</span>([ <var>width</var> [, <var>height</var> ] ])</code><dd>
    <p>Returns a new <code id=the-img-element:the-img-element-13><a href=#the-img-element>img</a></code> element, with the <code id=the-img-element:attr-dim-width-3><a href=embedded-content-other.html#attr-dim-width>width</a></code>
    and <code id=the-img-element:attr-dim-height-3><a href=embedded-content-other.html#attr-dim-height>height</a></code> attributes set to the values passed in the
    relevant arguments, if applicable.</p>
   </dl>

  

  <div class=example>
   <p>Without the <code id=the-img-element:dom-img-decode><a href=#dom-img-decode>decode()</a></code> method, the process of loading an
   <code id=the-img-element:the-img-element-14><a href=#the-img-element>img</a></code> element and then displaying it might look like the following:</p>

   <pre><code class='js'><c- a>const</c-> img <c- o>=</c-> <c- k>new</c-> Image<c- p>();</c->
img<c- p>.</c->src <c- o>=</c-> <c- u>&quot;nebula.jpg&quot;</c-><c- p>;</c->
img<c- p>.</c->onload <c- o>=</c-> <c- p>()</c-> <c- p>=&gt;</c-> <c- p>{</c->
    document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c->img<c- p>);</c->
<c- p>};</c->
img<c- p>.</c->onerror <c- o>=</c-> <c- p>()</c-> <c- p>=&gt;</c-> <c- p>{</c->
    document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c-><c- k>new</c-> Text<c- p>(</c-><c- u>&quot;Could not load the nebula :(&quot;</c-><c- p>));</c->
<c- p>};</c-></code></pre>

   <p>However, this can cause notable dropped frames, as the paint that occurs after inserting the
   image into the DOM causes a synchronous decode on the main thread.</p>

   <p>This can instead be rewritten using the <code id=the-img-element:dom-img-decode-2><a href=#dom-img-decode>decode()</a></code>
   method:</p>

   <pre><code class='js'><c- a>const</c-> img <c- o>=</c-> <c- k>new</c-> Image<c- p>();</c->
img<c- p>.</c->src <c- o>=</c-> <c- u>&quot;nebula.jpg&quot;</c-><c- p>;</c->
img<c- p>.</c->decode<c- p>().</c->then<c- p>(()</c-> <c- p>=&gt;</c-> <c- p>{</c->
    document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c->img<c- p>);</c->
<c- p>}).</c-><c- k>catch</c-><c- p>(()</c-> <c- p>=&gt;</c-> <c- p>{</c->
    document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c-><c- k>new</c-> Text<c- p>(</c-><c- u>&quot;Could not load the nebula :(&quot;</c-><c- p>));</c->
<c- p>});</c-></code></pre>

   <p>This latter form avoids the dropped frames of the original, by allowing the user agent to
   decode the image <span>in parallel</span>, and only inserting it into the DOM (and thus causing
   it to be painted) once the decoding process is complete.</p>
  </div>

  <div class=example>
   <p>Because the <code id=the-img-element:dom-img-decode-3><a href=#dom-img-decode>decode()</a></code> method attempts to ensure that the
   decoded image data is available for at least one frame, it can be combined with the <code id=the-img-element:dom-animationframeprovider-requestanimationframe><a href=imagebitmap-and-animations.html#dom-animationframeprovider-requestanimationframe>requestAnimationFrame()</a></code> API.
   This means it can be used with coding styles or frameworks that ensure that all DOM modifications
   are batched together as <a href=imagebitmap-and-animations.html#list-of-animation-frame-callbacks id=the-img-element:list-of-animation-frame-callbacks>animation frame
   callbacks</a>:</p>

   <pre><code class='js'><c- a>const</c-> container <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;#container&quot;</c-><c- p>);</c->

<c- a>const</c-> <c- p>{</c-> containerWidth<c- p>,</c-> containerHeight <c- p>}</c-> <c- o>=</c-> computeDesiredSize<c- p>();</c->
requestAnimationFrame<c- p>(()</c-> <c- p>=&gt;</c-> <c- p>{</c->
 container<c- p>.</c->style<c- p>.</c->width <c- o>=</c-> containerWidth<c- p>;</c->
 container<c- p>.</c->style<c- p>.</c->height <c- o>=</c-> containerHeight<c- p>;</c->
<c- p>});</c->

<c- c1>// ...</c->

<c- a>const</c-> img <c- o>=</c-> <c- k>new</c-> Image<c- p>();</c->
img<c- p>.</c->src <c- o>=</c-> <c- u>&quot;supernova.jpg&quot;</c-><c- p>;</c->
img<c- p>.</c->decode<c- p>().</c->then<c- p>(()</c-> <c- p>=&gt;</c-> <c- p>{</c->
    requestAnimationFrame<c- p>(()</c-> <c- p>=&gt;</c-> container<c- p>.</c->appendChild<c- p>(</c->img<c- p>));</c->
<c- p>});</c-></code></pre>
  </div>

  

  <div class=example>

   <p>A single image can have different appropriate alternative text depending on the context.</p>

   <p>In each of the following cases, the same image is used, yet the <code id=the-img-element:attr-img-alt-4><a href=#attr-img-alt>alt</a></code> text is different each time. The image is the coat of arms of the
   Carouge municipality in the canton Geneva in Switzerland.</p>

   <p>Here it is used as a supplementary icon:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I lived in <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;carouge.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-> Carouge.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Here it is used as an icon representing the town:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Home town: <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;carouge.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Carouge&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Here it is used as part of a text on the town:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Carouge has a coat of arms.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;carouge.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The coat of arms depicts a lion, sitting in front of a tree.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->It is used as decoration all over the town.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Here it is used as a way to support a similar text where the description is given as well as,
   instead of as an alternative to, the image:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Carouge has a coat of arms.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;carouge.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Here it is used as part of a story:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->She picked up the folder and a piece of paper fell out.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;carouge.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Shaped like a shield, the paper had a</c->
<c- s>red background, a green tree, and a yellow lion with its tongue</c->
<c- s>hanging out and whose tail was shaped like an S.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->She stared at the folder. S! The answer she had been looking for all
this time was simply the letter S! How had she not seen that before? It all
came together now. The phone call where Hector had referred to a lion&apos;s tail,
the time Maria had stuck her tongue out...<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Here it is not known at the time of publication what the image will be, only that it will be a
   coat of arms of some kind, and thus no replacement text can be provided, and instead only a brief
   caption for the image is provided, in the <code id=the-img-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The last user to have uploaded a coat of arms uploaded this one:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;last-uploaded-coat-of-arms.cgi&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;User-uploaded coat of arms.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>Ideally, the author would find a way to provide real replacement text even in this case, e.g.
   by asking the previous user. Not providing replacement text makes the document more difficult to
   use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth
   connections or who pay by the byte, or users who are forced to use a text-only web browser.</p>

  </div>

  <div class=example>

   <p>Here are some more examples showing the same picture used in different contexts, with
   different appropriate alternate texts each time.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->My cats<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Fluffy<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Fluffy is my favorite.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;fluffy.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;She likes playing with a ball of yarn.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->She&apos;s just too cute.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Miles<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My other cat, Miles just eats and sleeps.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Photography<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Shooting moving targets indoors<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;fluffy.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;A cat flying by, chasing a ball of yarn, can be</c->
<c- s> photographed quite nicely using this technique.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Nature by night<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->To achieve this, you&apos;ll need either an extremely sensitive film, or
 immense flash lights.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->About me<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->My pets<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I&apos;ve got a cat named Fluffy and a dog named Miles.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;fluffy.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Fluffy, my cat, tends to keep itself busy.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My dog Miles and I like go on long walks together.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->music<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->After our walks, having emptied my mind, I like listening to Bach.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Fluffy and the Yarn<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Fluffy was a cat who liked to play with yarn. She also liked to jump.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>aside</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;fluffy.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Fluffy&quot;</c-><c- p>&gt;&lt;/</c-><c- f>aside</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->She would play in the morning, she would play in the evening.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

  </div>


  <nav><a href=edits.html>← 4.7 Edits</a> — <a href=./>Table of Contents</a> — <a href=images.html>4.8.4 Images →</a></nav>
